{{ define "index/index.html" }}

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="viggo" />
    <title>{{.site.Sitename}}</title>
    <meta name="keywords" content="{{.site.Keywords}}">
    <meta name="description" content="{{.site.Description}}">
    <link rel="shortcut icon" href="../assets/images/favicon.png">
    <link rel="stylesheet" href="/assets/css/googleapis.css">
    <link rel="stylesheet" href="../assets/css/fonts/linecons/css/linecons.css">
    <link rel="stylesheet" href="../assets/css/fonts/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/css/bootstrap.css">
    <link rel="stylesheet" href="../assets/css/xenon-core.css">
    <link rel="stylesheet" href="../assets/css/xenon-components.css">
    <link rel="stylesheet" href="../assets/css/xenon-skins.css">
    <link rel="stylesheet" href="../assets/css/nav.css">
    <link rel="stylesheet" href="../assets/css/hclonely.css">
    
    <script src="../assets/js/jquery-1.11.1.min.js"></script>


    {{ .count }}

</head>

<body class="page-body">
    <!-- skin-white -->
    <div class="page-container">
        <div class="sidebar-menu toggle-others fixed">
            <div class="sidebar-menu-inner">
                <header class="logo-env">
                    <!-- logo -->
                    <div class="logo">
                        <a href="/" class="logo-expanded">
                            <img src="{{.site.Sitelogo}}" width="100%" alt="" />
                        </a>
                        <a href="/" class="logo-collapsed">
                            <img src="/assets/images/logo-collapsed@2x.png" width="40" alt="" />
                        </a>
                    </div>
                    <div class="mobile-menu-toggle visible-xs">
                        <a href="#" data-toggle="user-info-menu">
                            <i class="linecons-cog"></i>
                        </a>
                        <a href="#" data-toggle="mobile-menu">
                            <i class="fa-bars"></i>
                        </a>
                    </div>
                </header>
                <ul id="main-menu" class="main-menu">
                    {{ range .groups }}
                    <li>
                        <a href="#{{ .Name }}" class="smooth">
                            <i class="{{ .Logo }}"></i>
                            <span class="title">{{ .Name }}</span>
                        </a>
                    </li>
                    {{ end }}






                    <li>
                        <a href="about">
                            <i class="linecons-heart"></i>
                            <span class="tooltip-blue">关于本站</span>
                            <span class="label label-Primary pull-right hidden-collapsed">♥︎</span>
                        </a>
                    </li>

                </ul>
            </div>
        </div>
        <div class="main-content">
            <nav class="navbar user-info-navbar" role="navigation">
                <!-- User Info, Notifications and Menu Bar -->
                <!-- Left links for user info navbar -->
                <ul class="user-info-menu left-links list-inline list-unstyled">
                    <li class="hidden-sm hidden-xs">
                        <a href="#" data-toggle="sidebar">
                            <i class="fa-bars"></i>
                        </a>
                    </li>


                </ul>
                <ul class="user-info-menu right-links list-inline list-unstyled">
                    <li class="hidden-sm hidden-xs">
                        <a href="https://github.com/skyzgh-cn/WebStack-golang" target="_blank">
                            <i class="fa-github"></i>  GitHub
                        </a>
                    </li>
                </ul>

            </nav>

            <section class="sousuo">
                <div class="search">
                    <div class="search-box">
                        <span class="search-icon"
                              style="background: url(/assets/images/search_icon.png) 0px 0px; opacity: 1;"></span>
                        <input type="text" id="txt" class="search-input" autocomplete="off" placeholder="请输入关键字，按回车 / Enter 搜索">
                        <button class="search-btn" id="search-btn"><i class="fa fa-search"></i></button>
                    </div>
                    
                    <div class="box search-hot-text" id="box" style="display: none;">
                        <ul></ul>
                    </div>
                    
                    <div class="search-engine" style="display: none;">
                        <div class="search-engine-head">
                            <strong class="search-engine-tit">选择您的默认搜索引擎：</strong>
                            <div class="search-engine-tool">
                                搜索热词： <span id="hot-btn" style="background-image: url(/assets/images/off_on.png);"></span>
                            </div>
                        </div>
                        <ul class="search-engine-list search-engine-list_zmki_ul">
                        </ul>
                    </div>
                </div>
            </section>
            <script src="../assets/js/header.js"></script>
            <script>
                $(function(){
                    search('/assets/images/search_icon.png');
                });
            </script>


            {{ range .groups }}
            <h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="{{.Name}}"></i>{{.Name}}</h4>
            <div class="row">
                {{ range .Websites }}
                <div class="col-sm-3">
                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('{{.Url}}', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="{{.Url}}">
                        <div class="xe-comment-entry">
                            <a class="xe-user-img">
                                <img data-src="{{.Logo}}" class="lozad img-circle" width="40" onerror="this.src='/assets/images/default.png'" alt="logo">
                            </a>
                            <div class="xe-comment">
                                <a href="#" class="xe-user-name overflowClip_1">
                                    <strong>{{.Name}}</strong>
                                </a>
                                <p class="overflowClip_2">{{ .Description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                {{ end }}
            </div>
            <br />
            {{ end }}








            <footer class="main-footer sticky footer-type-1">
                <div class="footer-inner">

                    {{.copyright}}

                    <div class="go-up">
                        <a href="#" rel="go-top">
                            <i class="fa-angle-up"></i>
                        </a>
                    </div>
                </div>
            </footer>
        </div>
    </div>
    <!-- 锚点平滑移动 -->
    <script type="text/javascript">
    $(document).ready(function() {
         //img lazy loaded
         const observer = lozad();
         observer.observe();

        $(document).on('click', '.has-sub', function(){
            var _this = $(this)
            if(!$(this).hasClass('expanded')) {
               setTimeout(function(){
                    _this.find('ul').attr("style","")
               }, 300);
              
            } else {
                $('.has-sub ul').each(function(id,ele){
                    var _that = $(this)
                    if(_this.find('ul')[0] != ele) {
                        setTimeout(function(){
                            _that.attr("style","")
                        }, 300);
                    }
                })
            }
        })
        $('.user-info-menu .hidden-sm').click(function(){
            if($('.sidebar-menu').hasClass('collapsed')) {
                $('.has-sub.expanded > ul').attr("style","")
            } else {
                $('.has-sub.expanded > ul').show()
            }
        })
        $("#main-menu li ul li").click(function() {
            $(this).siblings('li').removeClass('active'); // 删除其他兄弟元素的样式
            $(this).addClass('active'); // 添加当前元素的样式
        });
        $("a.smooth").click(function(ev) {
            ev.preventDefault();

            public_vars.$mainMenu.add(public_vars.$sidebarProfile).toggleClass('mobile-is-visible');
            ps_destroy();
            $("html, body").animate({
                scrollTop:$(decodeURI($(this).attr("href"))).offset().top - 30
            }, {
                duration: 500,
                easing: "swing"
            });
        });
        return false;
    });


    var href = "";
    var pos = 0;
    $("a.smooth").click(function (e) {
        $("#main-menu li").each(function () {
            $(this).removeClass("active");
        });
        $(this).parent("li").addClass("active");
        e.preventDefault();
        href = decodeURI($(this).attr("href"));
        pos = $(href).position().top - 30;
    });
    </script>
    <!-- Bottom Scripts -->
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/js/TweenMax.min.js"></script>
    <script src="../assets/js/resizeable.js"></script>
    <script src="../assets/js/joinable.js"></script>
    <script src="../assets/js/xenon-api.js"></script>
    <script src="../assets/js/xenon-toggles.js"></script>
    <!-- JavaScripts initializations and stuff -->
    <script src="../assets/js/xenon-custom.js"></script>
    <script src="../assets/js/lozad.js"></script>
</body>

</html>

{{ end }}